<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 移动设备优先
        为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，
        需要在网页的 head 之中添加 viewport meta 标签 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <!-- 
        width=device-width 表示宽度是设备屏幕的宽度。
        initial-scale=1 表示初始的缩放比例。
        shrink-to-fit=no 自动适应手机屏幕的宽度。 
    -->
    <title>BootStrap初体验</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="./BS/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../jquery.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="./BS/bootstrap.bundle.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="./BS/bootstrap.min.js"></script>
</head>

<body>
    <!-- 前面留有空白 -->
    <div class="container">
        <h1>我的第一个BootStrap页面</h1>
        <p>这是一些文本</p>
    </div>

    <!-- 前面不留空白 -->
    <div class="container-fluid">
        <h1>我的第一个BootStrap页面</h1>
        <p>使用了 container-fluid，100%宽度，占据全部视口（viewport）的容器 </p>
    </div>


    <!-- 
        Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
        网格类
        Bootstrap 4 网格系统有以下 5 个类:

            .col- 针对所有设备
            .col-sm- 平板 - 屏幕宽度等于或大于 576px
            .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
            .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
            .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

        网格系统规则
        Bootstrap4 网格系统规则:

            网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，
            这样就可以自动设置一些外边距与内边距。
            使用行来创建水平的列组。
            内容需要放置在列中，并且只有列可以是行的直接子节点。
            预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
            列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
            网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
            Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 
            Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 
            如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。
    -->
    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个等宽的列。</p>
        <div class="row">
            <div class="col" style="background-color:lavender;">.col</div>
            <div class="col" style="background-color:orange;">.col</div>
            <div class="col" style="background-color:lavender;">.col</div>
        </div>
    </div>

    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>重置浏览器大小查效果。</p>
        <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>

    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>重置浏览器大小查效果。</p>
        <p>在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
            <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-8</div>
            <div class="col-sm-3" style="background-color:lavender">.col-sm-4</div>
        </div>
    </div>


    <div class="container-fluid">
        平板和桌面端 --以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%， 右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
        <div class="row">
            <div class="col-sm-3 col-md-6" style="background-color:royalblue">
                <p>RUNOOB</p>
            </div>
            <div class="col-sm-9 col-md-6" style="background:greenyellow">
                <p>菜鸟教程</p>
            </div>
        </div>
    </div>

    <!-- 
        偏移列

        偏移列通过 offset-*-* 类来设置。
        第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

        为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。
        这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

        例如：.offset-md-4 是把.col-md-4 往右移了四列格。
     -->
    <div class="row">
        <div class="col-md-4" style="background: sandybrown">.col-md-4</div>
        <div class="col-md-4 offset-md-4" style="background: sienna">.offset-md-4 从上一个col-md-4开始偏移 4+4+4=12</div>
    </div>
    <div class="row">
        <div class="col-md-4 offset-md-4" style="background:sandybrown">offset-md-4 从0偏移 4+4=8</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3" style="background:steelblue">.col-md-3 .offset-md-3 3+3=6</div>
        <div class="col-md-3 offset-md-3" style="background:violet">.col-md-3 .offset-md-3 6+3+3=12</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3" style="background: yellowgreen">.offset-md-3 从0偏移3位，大小为6</div>
    </div>

</body>

</html>